
<template>
  <div>
    <el-card shadow="never" class="mb-5">
      <div class="flex items-center">
        <el-text>文章标题</el-text>
        <div class="ml-3 w-52 mr-5">
          <el-input v-model="searchArticleTitle"  placeholder="请输入（模糊查询）"></el-input>
        </div>
        <el-text>创建日期</el-text>
        <div CLASS="ml-3 w-30 mr-5">
          <el-date-picker v-model="pickDate" type="daterange" range-separator="至" start-placeholder="开始时间"
                          end-placeholder="结束时间" size="default" :shortcuts="shortcuts" @change="datepickerChange"/>
        </div>
        <el-button type="primary" class="ml-3" :icon="Search" @click="getTableData">查询</el-button>
        <el-button class="ml-3" :icon="RefreshRight" @click="reset">重置</el-button>
      </div>
    </el-card>

    <el-card shadow="never">
      <div class="mb-5">
        <el-button type="primary"  class="mb-5" @click="toAdd">
          <el-icon class="mr-1"><EditPen/></el-icon>
          写文章
        </el-button>

        <article-form ref="form" :is-add="isAdd"></article-form>

        <el-table :data="tableData" border stripe style="width: 100%;" v-loading="tableLoading">
          <el-table-column prop="id" label="ID" width="50"/>
          <el-table-column prop="title" label="标题" width="180"/>
          <el-table-column prop="cover" label="封面" width="180" >
            <template #default="scope">
              <el-image style="width: 50px" :src="scope.row.cover"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发布时间" width="180" />
          <el-table-column label="操作" >
            <template #default="scope">
              <el-button size="small" @click="toEdit(scope.row)">
                <el-icon class="mr-1">
                  <Edit />
                </el-icon>
                编辑</el-button>
              <el-button size="small" @click=" goArticleDetailPage(scope.row.id)">
                <el-icon class="mr-1">
                  <View />
                </el-icon>
                查看
              </el-button>
              <el-button type="danger" size="small" @click="deleteArticleSubmit(scope.row)">
                <el-icon class="mr-1">
                  <Delete />
                </el-icon>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="mt-10 flex justify-center">
          <el-pagination v-model:current-page="current" v-model:page-size="size" :page-sizes="[10, 20, 50]"
                         :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
                         :total="total" @size-change="handleSizeChange" @current-change="getTableData" />
        </div>
      </div>

    </el-card>
  </div>
</template>

<script setup>
import {
  Search,
  RefreshRight,
  EditPen,
  Edit,
  Delete,
  CircleCloseFilled,
  Plus,
  View
} from "@element-plus/icons-vue";
import {ref,reactive} from "vue";
import moment from "moment";
import {getArticlePageList,deleteArticle,publishArticle,getArticleDetail} from "@/api/admin/article.js";
import {showModel,showMessage} from "@/composables/utils.js";
import {MdEditor} from "md-editor-v3";
import 'md-editor-v3/lib/style.css'

import {uploadFile} from "@/api/admin/file.js";
import {getCategorySelectList} from "@/api/admin/category.js";
import {searchTags} from "@/api/admin/tag.js";
import ArticleForm from "@/pages/admin/article-form.vue";

import {useRouter} from "vue-router";

const searchArticleTitle = ref('')
const pickDate = ref('')
const startDate = reactive({})
const endDate = reactive({})

// 监听日期组件改变事件，并将开始结束时间设置到变量中
const datepickerChange =(e)=>{
  startDate.value = moment(e[0]).format('YYYY-MM-DD')
  endDate.value = moment(e[1]).format('YYYY-MM-DD')
  console.log('开始时间：' + startDate.value + ', 结束时间：' + endDate.value)
}

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

//重置
const reset=()=>{
  pickDate.value = ''
  startDate.value = null
  endDate.value = null
  searchArticleTitle.value = ''
}

const tableLoading=ref(false)
const tableData=ref([])
const current=ref(1)
const total=ref(0)
const size=ref(10)




// 获取分页数据
function getTableData(){
  tableLoading.value = true
  getArticlePageList({current: current.value, size: size.value,
    startDate:startDate.value,endDate:endDate.value,title: searchArticleTitle.value})
      .then((res)=>{
        if(res.success === true){
          tableData.value = res.data
          current.value = res.current
          total.value = res.total
          size.value = res.size
        }
      }).finally(()=>tableLoading.value = false)
}
getTableData()

const handleSizeChange = (chooseSize)=>{
  size.value = chooseSize
  getTableData()
}
// 删除文章
const deleteArticleSubmit =(row)=>{
  showModel('是否删除该文章').then(()=>{
    deleteArticle(row.id).then(res=>{
      if(res.success === false){
        let message = res.message
        showMessage(message,'error')
        return
      }
      showMessage('删除成功')
      getTableData()
    })
  })
}

const isAdd = ref(true)
const form = ref(null);
const toAdd=()=>{
  console.log('去添加')
  isAdd.value = true
  form.value.open()
}

const toEdit=(row)=>{
  isAdd.value = false
  let articleId = row.id
  getArticleDetail(articleId).then(res=>{
    if(res.success === true){
      form.value.edit(res.data)
    }
  })
}

//跳转文章详情页
const  router = useRouter()
const goArticleDetailPage=(articleId)=>{
  router.push({path:'/article/'+articleId})
}
</script>

<style scoped>
/* 封面图片样式 */
.avatar-uploader .avatar {
  width: 200px;
  height: 100px;
  display: block;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 100px;
  text-align: center;
}
.md-editor-footer {
  height: 40px;
}

/* 指定 select 下拉框宽度 */
.el-select--large {
  width: 600px;
}
</style>
